<template>
  <div class="latest-detail">
    <common-nav :single="$route.query.name"></common-nav>
    <common-lists :data="detailLists"></common-lists>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import CommonNav from "../../components/common/common-nav"
  import {State} from "vuex-class";
  import {Actions, Store} from "../../enums/Store";
  import {SongsInterface, StoreInterface} from "../../interfaces/PageInterface";
  import CommonLists from '../../components/common/common-lists'

  @Component({
    components:{
      CommonNav,
      CommonLists
    }
  })
  export  default  class LatestDetail extends Vue  {
    @State(Store.LatestDetail) latestDetails: StoreInterface[Store.LatestDetail]

    async fetch({store, params}){
      await store.dispatch(Actions.GetLatestDetail,params.rankid)
    }

    private mounted(){
          // console.log(this.latestDetails.songs.list)
    }

    get detailLists():SongsInterface[]{
      return this.latestDetails.songs.list.map(({hash,filename}) => {
        return {
          name:filename.substring(0,filename.indexOf('-')),
          author:filename.substring(filename.indexOf('-') + 1,filename.length),
		  hash:hash,
        }
      })
    }
  }
</script>

<style lang="scss">
  @include component(latest-detail){
     @extend %padding;
  }
</style>
